<template>
	<div class="richText-wrapper">
		<el-dialog :visible="dialogVisible" width="60%" :before-close="close" custom-class="rich-text-container">
			<div class="rich-text-contents" v-html="richText"></div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		richText: {
			type: String,
			default: () => '',
			required: true
		}
	},
	methods: {
		close() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="less" scoped>
.richText-wrapper {
	.rich-text-container {
		// position: absolute;
		// top: 0;
		// width: 50%;
		// margin: 10% 25%;
		// padding: 10px;
		// border-radius: 12px;
		// z-index: 400;
		// height: 70%;
		// overflow-y: scroll;
		// background-color: #fff;
		// box-shadow: 0px 5px 14px -12px #000;
		// margin-top: 340px;
		// .close {
		// 	text-align: right;
		// 	i {
		// 		font-size: 28px;
		// 		font-weight: 700;
		// 		color: #c9c9ce;
		// 	}
		// 	position: fixed;
		// 	width: 100%;
		// 	right: 16%;
		// }
		.rich-text-contents {
			padding-top: 20px;
			overflow-wrap: anywhere;
			text-align: left;
		}
	}
}
</style>
<style lang="less">
.richText-wrapper {
	.rich-text-contents {
		p,
		h1,
		h2,
		h3,
		h4,
		h5,
		table,
		pre {
			margin: 10px 0;
			line-height: 1.5;
		}

		ul,
		ol {
			margin: 10px 0 10px 20px;
			display: block;
			list-style-type: disc;
			margin-block-start: 1em;
			margin-block-end: 1em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			padding-inline-start: 20px;
			line-height: 1.5rem;
		}

		blockquote {
			display: block;
			border-left: 8px solid #d0e5f2;
			padding: 5px 10px;
			margin: 10px 0;
			line-height: 1.4;
			font-size: 100%;
			background-color: #f1f1f1;
		}

		code {
			display: inline-block;
			background-color: #f1f1f1;
			border-radius: 3px;
			padding: 3px 5px;
			margin: 0 3px;
		}

		pre {
			code {
				display: block;
			}
		}

		table {
			border-top: 1px solid #ccc;
			border-left: 1px solid #ccc;

			td,
			th {
				border-bottom: 1px solid #ccc;
				border-right: 1px solid #ccc;
				padding: 3px 5px;
				min-height: 30px;
				height: 30px;
			}

			th {
				border-bottom: 2px solid #ccc;
				text-align: center;
				background-color: #f1f1f1;
			}
		}

		&:focus {
			outline: none;
		}

		img {
			cursor: pointer;

			&:hover {
				box-shadow: 0 0 5px #333;
			}
		}

		.w-e-todo {
			margin: 0 0 0 20px;
			li {
				list-style: none;
				font-size: 1em;
				span:nth-child(1) {
					position: relative;
					left: -18px;
					input {
						position: absolute;
						margin-right: 3px;
					}
					// 防止其他样式通过属性选择器重置input样式
					input[type='checkbox'] {
						top: 50%;
						margin-top: -6px;
					}
				}
			}
		}
		h1 {
			font-size: 32px !important;
			margin: 10px 0;
			line-height: 1.5;
			margin-block-start: 0.67em;
			margin-block-end: 0.67em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			font-weight: bold;
		}
		h2 {
			margin: 10px 0;
			line-height: 1.5;
			font-size: 24px !important;
			display: block;
			margin-block-start: 0.83em;
			margin-block-end: 0.83em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			font-weight: bold;
		}
		h3 {
			margin: 10px 0;
			line-height: 1.5;
			font-size: 18.72px !important;
			display: block;
			margin-block-start: 1em;
			margin-block-end: 1em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			font-weight: bold;
		}
		h4 {
			margin: 10px 0;
			line-height: 1.5;
			font-size: 16px !important;
			display: block;
			margin-block-start: 1.33em;
			margin-block-end: 1.33em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			font-weight: bold;
		}
		h5 {
			margin: 10px 0;
			line-height: 1.5;
			font-size: 13.28px !important;
			display: block;
			margin-block-start: 1.67em;
			margin-block-end: 1.67em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			font-weight: bold;
		}
		p {
			font-size: 16px !important;
			display: block;
			margin-block-start: 1em;
			margin-block-end: 1em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
		}
		b {
			font-weight: bold;
		}
	}
}
</style>

<style lang="less">
.richText-wrapper .rich-text-container .el-dialog__headerbtn {
	top: 5px;
	font-size: 18px;
}
.richText-wrapper .el-dialog {
	margin: auto 100px;
	margin-top: 0vh !important;
	max-height: calc(100vh - 200px);

}
.richText-wrapper {
	.el-dialog__body {
		max-height: calc(100% - 30px);
		overflow: hidden;
	}
	.el-dialog__header {
		border: none;
	}
}

</style>
